<script lang="ts">
export default {
  name: "RepoProductCompDialog"
}
</script>

<template>
  <!-- 对话框 -->
  <el-dialog :close-on-click-modal="false" :model-value="visible" :title="dataState.title" min-width="200px"
             @close="handleCancel">

    <!-- 数据表单 -->
    <el-form ref="dataFormRef" :model="dataState.formData" :rules="dataState.rules" label-width="100px">

      <!-- 编辑框：模块名称 -->
      <el-form-item label="组件名称" prop="modelName">
        <el-input v-model="dataState.formData.modelName" />
      </el-form-item>

      <!-- 下拉框：配置类型 -->
      <el-form-item label="组件类型" prop="modelType">
        <el-select v-model="dataState.formData.modelType" placeholder="请选择" style="width:100%">
          <el-option
              v-for="item in dataState.modelTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>

      <!-- 编辑框：模块版本 -->
      <el-form-item label="接口版本" prop="modelVersion">
        <el-input v-model="dataState.formData.modelVersion" :disabled="(dataState.formData.modelType !== 'decoder')" />
      </el-form-item>

    </el-form>

    <!-- 脚部：确认/取消按钮-->
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
        <el-button @click="handleCancel">取 消</el-button>
      </div>
    </template>

  </el-dialog>
</template>

<script lang="ts" setup>
import {nextTick, onMounted, reactive, ref} from "vue";

import {ElForm} from "element-plus";
import {CreateRepoProductRequestVO} from "@/api/cloud/repository/repoproduct/types";

const props = defineProps(['visible']);
const emit = defineEmits(['create', 'update', 'cancel']); //注意：这个是父组件<dict-type-edit>标签上的@close
const dataFormRef = ref(ElForm); // 属性名必须和元素的ref属性值一致

/**
 * 对外声明接口：父页面可以调用它
 */
defineExpose({initEditData});

// 数据状态：定义
let dataState = reactive({
  // 类型：create/update
  type: 'create',
  // 标题
  title: '添加模块',
  // 表单数据
  formData: {
    productId: '',
    uuid: '',
    modelType: '',
    modelName: '',
    modelVersion: '',
    version: '',
    stage: '',
  } as CreateRepoProductRequestVO,

  modelTypeOptions: [] as OptionType[],

  // 对话框的各控件输入规则
  rules: {
    modelName: [{required: true, message: '必填項', trigger: 'blur'}],
    modelType: [{required: true, message: '必填項', trigger: 'blur'}],
    modelVersion: [{required: true, message: '必填項', trigger: 'blur'}],
  },
});


/**
 * 取消
 */
function handleCancel() {
  emit('cancel', "");
}

/**
 * 确认：新增/修改实体
 */
function handleSubmit() {
  if (dataState.type === 'create') {
    emit('create', dataState.formData);
  }
  if (dataState.type === 'update') {
    emit('update', dataState.formData);
  }
}

/**
 * 初始化对话框
 * @taskParam type 对话框类型
 * @taskParam entity 实体
 */
function initEditData(type: string, entity: any) {
  if (type === 'create') {
    dataState.type = type;
    dataState.title = '添加组件';

    dataState.formData.uuid = undefined;
    dataState.formData.productId = entity.uuid;
    dataState.formData.modelType = 'service';
    dataState.formData.modelVersion = 'v1';
    dataState.formData.modelName = '';
    dataState.formData.version = '';
    dataState.formData.stage = '';

    nextTick(() => {
      dataFormRef.value.resetFields();
    })
    return;
  }

  if (type === 'update') {
    dataState.type = type;
    dataState.title = '修改模块';


    dataState.formData.uuid = entity.uuid;
    dataState.formData.productId = entity.productId;
    dataState.formData.modelType = entity.modelType;
    dataState.formData.modelVersion = entity.modelVersion;
    dataState.formData.modelName = entity.modelName;
    dataState.formData.version = entity.version;
    dataState.formData.stage = entity.stage;

    return;
  }
}

/**
 * 响应页面安装：页面的初始化工作
 */
onMounted(() => {
  dataState.modelTypeOptions.push({value: 'service', label: 'service'} as OptionType);
  dataState.modelTypeOptions.push({value: 'decoder', label: 'decoder'} as OptionType);
  dataState.modelTypeOptions.push({value: 'template', label: 'template'} as OptionType);

  dataState.formData.modelType = 'service';
  dataState.formData.modelVersion = 'v1';
});

</script>
